/**
 * Created by mingtao on 7/21/16.
 */

var template = '\
<link href="./styles/vendors/AdminLTE.min.css" rel="stylesheet">\
<link href="./styles/_all-skins.min.css" rel="stylesheet">\
<link href="./styles/components.css" rel="stylesheet">\
<header class="main-header"> \
<nav class="navbar navbar-default">\
  <div class="container-fluid">\
    <div class="navbar-header">\
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">\
        <span class="sr-only">Toggle navigation</span>\
        <span class="icon-bar"></span>\
        <span class="icon-bar"></span>\
        <span class="icon-bar"></span>\
      </button>\
      <a class="navbar-brand" href="#">管理后台</a>\
    </div>\
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">\
      <ul class="nav navbar-nav navbar-right">\
        <li><a href="javascript: void 0" id="setting">设置</a></li>\
        <li><a href="#">退出</a></li>\
      </ul>\
    </div><!-- /.navbar-collapse -->\
  </div><!-- /.container-fluid -->\
</nav>\
</header>\
<div class="container-fluid">\
  <div class="row">\
    <aside class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side-bar" id="left">\
      <ul class="sidebar-menu">\
        {{nav}}\
      </ul>\
    </aside>\
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10" id="right">\
      {{panel}}\
    </div>\
  </div>\
</div>\
<div class="modal fade" id="pwd_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">\
    <div class="modal-dialog modal-sm" role="document">\
      <form class="modal-content">\
        <div class="modal-body">\
          <div class="control-group row">\
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 left">\
              <label class="control-label" for="origin-pwd">原始密码:</label>\
            </div>\
            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 right">\
              <div class="controls">\
                <input type="password" class="form-control" id="origin-pwd" name="origin-pwd">\
              </div>\
            </div>\
          </div>\
          <div class="control-group row">\
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 left">\
              <label class="control-label" for="new-pwd">新密码:</label>\
            </div>\
            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 right">\
              <div class="controls">\
                <input type="password" class="form-control" id="new-pwd" name="new-pwd">\
              </div>\
            </div>\
          </div>\
          <div class="control-group row">\
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 left">\
              <label class="control-label" for="repeat">重复输入:</label>\
            </div>\
            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 right">\
              <div class="controls">\
                <input type="password" class="form-control" id="repeat" name="repeat">\
              </div>\
            </div>\
          </div>\
        </div>\
        <div class="modal-footer">\
          <button type="button" class="btn btn-primary">确定</button>\
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>\
        </div>\
      </form>\
    </div>\
  </div>\
  <script>$("#setting").click(function() {$("#pwd_modal").modal("show")})</script>\
';
var conetent_id = "content";

$(function () {
  var Renderer = function (template, content_id, nav_list, nav_current) {
    this.template = template;
    this.content_id = content_id;
    this.nav_list = nav_list;
    this.nav_current = nav_current;
  };
  Renderer.prototype.render = function () {
    var nav_str = "";
    for(var i in this.nav_list) {
      if(!this.nav_list.hasOwnProperty(i)) {
        console.error("nav渲染出错");
        continue;
      }

      var str = '<li><a href="'+ nav_list[i].url+'" class="list-group-item">' + this.nav_list[i].name +'</a></li>';
      if(this.nav_list[i].name === this.nav_current) {
        str = str.replace(/list-group-item/, "list-group-item active");
      }
      nav_str += str;
    }
    var html = this.template.replace(/\{\{nav}}/, nav_str);
    
    var content = $("#"+this.content_id).html();
    html = html.replace(/\{\{panel}}/, content);
    
    $('body').html(html);
  };


  var nav_current = $("meta[name='nav_current']").attr("content");
  var nav_list = [
    {name: '首页', url:"page1_index.html"},
    {name: '信息管理', url:"page2_info_manage.html"},
    {name: '通讯录管理', url:"page3_contact_manage.html"},
    {name: '日常安排', url:"page4_daily_manage.html"},
    {name: '资料管理', url:"page5_data_manage.html"},
    {name: '电子地图管理', url:"page6_map_manage.html"},
    {name: '视频查看', url:"page7_video_view.html"},
    {name: '实时回传视频', url:"page8_video_sendback.html"},
    {name: '反馈管理', url:"page9_feedback_manage.html"},
    {name: '用户管理', url:"page10_user_manage.html"}
  ];
  var renderer = new Renderer(template, conetent_id, nav_list, nav_current);
  renderer.render();
});

